<template>
	<view>
		<view class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiper" :key="index">
					<image :src="item.img" mode=""></image>
				</swiper-item>
				
			</swiper>
			
		</view>
		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav-item">
				<view class="icon" v-for="(item,index) in list">
						<text class="tb iconfont " :class="item.icon" ></text>
				<view class="wenzi">{{item.text}}</view>
				</view>
				
		
			</view>
			
		</view>
	<!-- 推荐商品区 -->
	<view class="shangpin_tj">
		<view class="biaoti">
		推荐商品
		</view>
		<view class="list flex1">
			<shangpin v-for="(item,index) in liebiao" :key="index" :item="item"></shangpin>
		</view>
		
		
	</view>
	</view>
</template>

<script>
	import { apis } from "../../http/apis.js";
	import "../../common/iconfont.css"
	import shangpin from "@/components/shangpin.vue"
	export default {
		data() {
			return {
				swiper:[],
				liebiao:[],
				list:[
					{id:0,icon:'icon-shangpin-',text:'黑马超市'},
					{id:1,icon:'icon-emiguanyuwomen',text:'联系我们'},
					{id:2,icon:'icon-tupian',text:'社区图片'},
					{id:3,icon:'icon-shipin1',text:'学习视频'},
					
				]
			}
		},
		onLoad() {
			apis.lunbo().then((res)=>{
				
				this.swiper=res[1].data.message
			
			})
			apis.liebiao().then((res)=>{
				this.liebiao=res[1].data.message
				// console.log(this.liebiao);
				console.log(res);
			})
		
		},
		methods: {
			
		},
		components:{
			shangpin
		}
	}
</script>

<style lang="scss" scoped>
	.lunbo{
		swiper-item{
			width: 750rpx;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav{
		.nav-item{
			display: flex;
			margin: 10rpx 0;
			padding: 20rpx  0;
			justify-content: space-around;
			align-items: center;
		
		}
		.icon{
			text-align: center;
				margin: 5rpx 0;
		}
		.tb{
			padding: 20rpx;
			border-radius: 50%;
			background-color: orangered;
			color: #fff;
		}
		.wenzi{
			margin: 20rpx 0;
			font-size: 30rpx;
		}
		
	}
.shangpin_tj{
	.biaoti{
		// background-color: #eee;
		text-align: center;
		height: 100rpx;
			line-height:100rpx ;
			color: red;
			letter-spacing: 40rpx;
			background-color: #fff;
			margin: 10rpx 0;
		border-top: 3px solid #eee;
		border-bottom: 3px solid #eee;	
	}
	.list{
		flex-wrap: wrap;
	}
}
</style>
